/**
* @description: 计划工单 ==> 计划工单监控
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack"></nav-bar>
    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.siteNum }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue"
        left-icon="" action-text="重置"
        right-icon="search" placeholder="请输入站点名称"
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="task-main" v-if="monitorList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
          <view class="task-list" v-for="(item,index) in monitorList" :key="index">
            <view @click="jump(item)">
              <view class="task-top">
                <img src="../../../../static/img/light.png" alt="">
                <text class="equip-title">{{ item.NAME }}</text>
                <text class="equip-state-wc" v-if="item.TASK_STATE === '99'">
                  <text style="color: #3CDA68">已完工</text>
                </text>
                <text class="equip-state-wzx" v-if="item.TASK_STATE === '2'">
                  <text style="color: #FF7070">未执行</text>
                </text>
                <text class="equip-state-zxz" v-if="item.TASK_STATE === '3'">
                  <text style="color: #FFAD0E">执行中</text>
                </text>
              </view>
              <hr class="patrol-hr">
              <ul class="task-list-main">
                <li>
                  <text class="task-title">计划巡视时间：</text>
                  <text class="task-titles">{{item.JHXSKSSJS}} ～ {{item.JHXSJSSJS}}</text>
                </li>
                <li>
                  <text class="task-title">巡视站点：</text>
                  <text class="task-titles">{{item.TASK_SITE_NAME}}</text>
                </li>
                <li>
                  <text class="task-title">巡视负责人：</text>
                  <text class="task-titles">{{ item.XSFZR }}</text>
                </li>
<!--                <li>-->
<!--                  <text class="task-title">巡视人员：</text>-->
<!--                  <text class="task-titles">{{ item.TOUR_OPER_LISTNAME }}</text>-->
<!--                </li>-->
              </ul>
            </view>
            <!-- 圆加虚线   -->
            <view class="by"></view>
            <view class="byr"></view>
            <hr class="task-hr">
            <view class="bottom-patrol">
              <view class="left-bottom-patrol">
                <text>工单进度：</text>
                <text>{{item.YWC}}/{{item.TOTAL}}</text>
              </view>
              <view class="right-bottom-patrol" v-if="item.TASK_STATE_NAME === '未执行' && item.XSFZRID === userData.userId">
                <van-button type="info" class="patrol-btn" @click="toReceive(item, 'BACK')">退回</van-button>
              </view>
              <view class="right-bottom-patrol" v-if="item.ISWG === '1' && item.TASK_STATE !== '99' && item.XSFZRID === userData.userId">
                <van-button type="info" class="patrol-btn" @click="toReceive(item, 'COMPLETE')">完工</van-button>
              </view>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
    </view>

    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  </view>
</template>
<script>
import navBar from '../../../../components/common/nav-bar'
import searchEquMatch from '../../../common/searchEquMatch'
import { Dialog, Notify } from 'vant'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'patrolTaskMonitor',
  components: { navBar, searchEquMatch },
  props: {},
  data() {
    return {
      backgroundColor: '#417ADC',
      title: '计划工单监控',
      current: 0,
      menuList: [],
      monitorList: [],
      showSearch: false,
      searchValue: '',
      total: 0, // 总条数
      page: 1,
      limit: 20,
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      isSearchLoading: false,
      resultInfo: '',
    }
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad() {
    this.getTaskListByReceiveP()
  },
  methods: {
    // 获取列表
    getTaskListByReceiveP() {
      let listParams = {
        limit: this.limit,
        page: this.page,
        userId: this.userData.userId,
        task_state: this.current,
        site_name: this.searchValue,
        batchId: this.userData.batchId,
        orgId: this.userData.orgId,
        roleId: this.userData.roleId
      }
      this.$api.getTaskListByReceive(listParams).then(res => {
        this.isLoading = false
        this.refreshing = false
        this.menuList = [
          {
            siteNum: res.data.state_count.QB,
            title: '全部'
          },
          {
            siteNum: res.data.state_count.WZX,
            title: '未执行'
          },
          {
            siteNum: res.data.state_count.ZXZ,
            title: '执行中'
          },
          {
            siteNum: res.data.state_count.YWG,
            title: '已完工'
          }
        ]
        this.monitorList = this.monitorList.concat(
          res.data.taskList.map(item => {
            return {
              JHXSKSSJS: item.JHXSKSSJ
                ? moment(item.JHXSKSSJ).format('YYYY-MM-DD HH:mm')
                : null,
              JHXSJSSJS: item.JHXSJSSJ
                ? moment(item.JHXSJSSJ).format('YYYY-MM-DD HH:mm')
                : null,
              ...item
            }
          })
        )
        this.total = res.data.total_number
      })
    },
    onSearch(searchValue) {
      this.searchValue = searchValue
      this.onRefresh()
      this.showSearch = false
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.monitorList = [];
      this.getTaskListByReceiveP();
    },
    loadMore() {
      if (this.total > this.monitorList.length) {
        this.page = this.page + 1
        this.getTaskListByReceiveP()
      } else {
        this.finished = true
      }
    },
    goBack() {
        uni.navigateTo({
          url: '/pages/index/index'
        })
    },
    chooseMenu(index) {
      this.current = index
      this.onRefresh()
    },
    toReceive(item, state) {
      if (state === 'BACK') {
        Dialog.confirm({
          title: '是否确认退回？'
        }).then(() => {
          this.$api.getUpdateTask({ objId: item.OBJ_ID }).then(res => {
            this.onRefresh()
          })
        })
      } else {
        Dialog.confirm({
          message: '该工单是否确认完工？'
        }).then(() => {
          this.$api.updateTaskComplete({ objId: item.OBJ_ID, tourTim: moment().format('YYYY-MM-DD HH:mm:ss')}).then(res => {
            this.onRefresh()
          })
        })
      }
    },
    jump(item) {
      // 跳转计划工单详情
      uni.navigateTo({
        url: `/pages/workBench/tourTask/taskMonitor/taskMonitor?taskState=${item.TASK_STATE}&objId=${item.OBJ_ID}&taskStateName=${item.TASK_STATE_NAME}`
      })
    }
  }
}
</script>
<style scoped lang="scss">
.task-monitor {
  width: 100vw;
  height: 100vh;
  background: #f2f6fa;
  overflow: hidden;
  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417adc;
    margin-bottom: px2vh(130);
    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      margin: 0 auto;
      //margin-left: px2vw(30);
      display: flex;
      justify-content: space-evenly;
      li {
        //width: calc(1 * (100% - #{px2vw(400)}) / 4);
        height: 100%;
        //margin-left: px2vw(80);
        //float: left;
        position: relative;
        .right-box {
          height: px2vh(112);
          //margin-left:px2vw(10);
          float: left;
          margin-top: px2vh(59);
          text-align: center;
          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }
          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }
          .selectmenu {
            color: #417adc;
          }
        }
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          left: 50%;
          transform: translateX(-50%);
          //right: px2vw(40);
          background-image: url('../../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(20) px2vw(30);
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .task-main {
    height: calc(100vh - #{px2vh(450)} - 38px);
    overflow: auto;
    position: relative;
    .task-list {
      width: px2vw(1020);
      padding-bottom: px2vh(30);
      //height: px2vh(566);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin-top: px2vh(30);
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
      .task-top {
        width: calc(100% - #{px2vw(80)});
        margin-left: px2vw(40);
        height: px2vh(140);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(40);
          float: left;
        }
        .equip-title {
          color: #333;
          font-size: px2vw(48);
          width: px2vw(700);
          height: px2vh(48);
          line-height: px2vh(48);
          float: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: px2vh(48);
          margin-left: px2vw(25);
        }
        .equip-state-wc,
        .equip-state-wzx,
        .equip-state-zxz {
          display: flex;
          justify-content: center;
          align-items: center;
          width: px2vw(123);
          height: px2vh(50);
          font-size: px2vw(32);
          border-radius: px2vw(10);
          margin-top: px2vh(48);
          margin-left: px2vw(27);
          float: left;
          //text-align: center;
        }
        .equip-state-wc {
          color: #3CDA68;
          background: rgba(62, 218, 104, 0.1);
        }
        .equip-state-wzx {
          color: #FF7070;
          background: rgba(255, 112, 112, 0.1);
        }
        .equip-state-zxz {
          color: #FFAD0E;
          background: rgba(255, 180, 0, 0.1);
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
    }
    .task-list-main {
      width: px2vw(940);
      //height: px2vh(266);
      margin-left: px2vw(40);
      padding-bottom: px2vh(30);
      li {
        margin-top: px2vh(30);
        height: px2vh(36);
        font-size: px2vw(36);
        .task-title {
          color: #666;
        }
        .task-titles {
          color: #333;
        }
      }
    }
    .task-hr {
      width: px2vw(940);
      border: 0;
      border-bottom: px2vh(6) dashed #e5e5e5;
      margin-top: px2vh(14);
      margin-left: px2vw(40);
    }
    .by {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      left: px2vw(12);
      float: left;
      background: #f2f6fa;
    }
    .byr {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      right: px2vw(12);
      float: right;
      background: #f2f6fa;
    }
    .bottom-patrol {
      width: px2vw(940);
      height: px2vh(54);
      margin-left: px2vw(40);
      margin-top: px2vh(26);
      font-size: px2vw(32);
      .left-bottom-patrol {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px2vw(300);
        padding: 2px 4px;
        //height: px2vh(54);
        background: #ecf1fb;
        float: left;
        text-align: center;
        color: #417adc;
        border-radius: px2vw(8);
      }
      .right-bottom-patrol {
        width: px2vw(120);
        height: px2vh(54);
        float: right;
        .patrol-btn {
          width: px2vw(120);
          height: px2vh(54);
          background: #417adc;
          float: right;
          //border-radius: px2vw(20);
        }
        /deep/.van-button--normal {
          padding: 0;
        }
      }
    }
  }
}

</style>
